<template>
  <div class="editor-form" :style="{ backgroundColor: '#fff', padding: '15px', borderRadius: '8px' }">
    <div class="form-title" :style="{ color: props.titleColor, marginBottom: '15px', fontSize: '18px', fontWeight: 'bold' }">
      {{ props.title }}
    </div>
    
    <div class="form-fields">
      <div 
        v-for="(field, index) in props.fields" 
        :key="index"
        class="form-field"
      >
        <div class="field-label" :style="{ color: props.labelColor, marginBottom: '5px' }">
          {{ field.label }}
          <span v-if="field.required" class="required-mark">*</span>
        </div>
        
        <el-input 
          v-if="field.type === 'text'" 
          placeholder="请输入" 
          class="field-input"
        />
        
        <el-input 
          v-else-if="field.type === 'phone'" 
          placeholder="请输入手机号" 
          class="field-input"
        />
        
        <el-input 
          v-else-if="field.type === 'textarea'" 
          type="textarea" 
          :rows="3" 
          placeholder="请输入" 
          class="field-input"
        />
      </div>
    </div>
    
    <el-button 
      class="submit-button" 
      :style="{ backgroundColor: props.buttonColor, color: '#fff', width: '100%', marginTop: '20px' }"
    >
      {{ props.submitText }}
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
import { ElInput, ElButton } from 'element-plus';

const props = defineProps({
  title: {
    type: String,
    default: '信息收集'
  },
  fields: {
    type: Array,
    default: () => [
      { type: 'text', label: '姓名', required: true },
      { type: 'phone', label: '手机号', required: true },
      { type: 'textarea', label: '留言', required: false }
    ]
  },
  submitText: {
    type: String,
    default: '提交'
  },
  buttonColor: {
    type: String,
    default: '#8B4513'
  },
  titleColor: {
    type: String,
    default: '#333333'
  },
  labelColor: {
    type: String,
    default: '#666666'
  }
});

defineOptions({
  name: 'editor-form'
});
</script>

<style lang="scss" scoped>
.editor-form {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  
  .form-fields {
    .form-field {
      margin-bottom: 15px;
      
      .required-mark {
        color: #f56c6c;
        margin-left: 4px;
      }
      
      .field-input {
        width: 100%;
      }
    }
  }
  
  .submit-button {
    border: none;
    height: 40px;
    font-size: 15px;
    
    &:hover {
      opacity: 0.9;
    }
  }
  
  &:hover {
    outline: 1px dashed #ccc;
  }
}
</style> 